<template>
	<view class="page">
		<com-header title="订单详情"></com-header>
		<view class="order-info">
			<view class="name">
				<text class="receiver">收货人姓名：</text>
				<text class="receiver-name">{{getinfo.receive_name}}</text>
			</view>
			<view class="tel">
				<text class="receiver-tel">收货手机号：</text>
				<text class="tel-number">{{getinfo.receive_phone}}</text>
			</view>
			<view class="user-id">
				<text class="receiver-id">收货人ID：</text>
				<text class="id-number">{{getinfo.member_code}}</text>
			</view>
			<view class="address">
				<text class="receiver-address">收货人地址：</text>
				<text class="address-content">{{getinfo.address_all}}</text>
			</view>
		</view>
		<view class="goods-name">
			<view class="goods-info" v-for="(item,index) in getinfo.bizpro_arr" :key="index">
				<image :src="item.bizpro_imgurl" @click="toDetail(item.bizpro_id)"></image>
				<text class="goods-content">{{item.bizpro_name}}</text>
				<view class="tagmain">
					<text class="tag-one tag" v-for="(lb,i) in item.lable" v-if="i<2">{{lb}}</text>
				</view>
				<view class="price-count">
					<text>¥ {{item.price}}</text>
					<text style="color: #ccc; margin-left: 20rpx; font-size: 24rpx;">×{{item.buy_num}}</text>
				</view>
				<text class="size">{{item.bizpro_spec_value}}</text>
				<text class="total">合计：<text style="color: #FF4E4C;">¥{{item.mod_total_price}}</text></text>
			</view>
		</view>
		<view class="order-detail">
			<view class="order-price-wrap">
				<text class="order-price">订单金额：</text>
				<text class="price">¥{{getinfo.total_price}}</text>
			</view>
			<view class="reduce-wrap">
				<text class="reduce">满减金额：</text>
				<text class="reduce-money">¥{{getinfo.cheap_price}}</text>
			</view>
			<view class="pay-wrap">
				<text class="pay">实际支付：</text>
				<text class="pay-cash">¥{{getinfo.pay_price}}</text>
			</view>
			<view class="payways-wrap">
				<text class="pay-ways">支付方式：</text>
				<text class="wechat">{{getinfo.pay_type}}</text>
			</view>
			<view class="paytime-wrap">
				<text class="pay-time">付款时间：</text>
				<text class="date">{{getinfo.pay_time}}</text>
			</view>
			<view class="ordernumber-wrap">
				<text class="order-number">订单编号：</text>
				<text class="number">{{getinfo.order_number}}</text>
			</view>
		</view>
	</view>
</template>

<script>
	import ComHeader from '@/components/ComHeader.vue';
	export default {
		onLoad: function(options) {
			this.order_id = options.order_id
			//调用需要的方法 
			this.getOrderDetail();
		},
		//先赋值一个变量 在调用
		data() {
			return {
				getinfo: [],
			}
		},

		components: {
			ComHeader
		},
		//调用接口 和跳页面
		methods: {
			// 获取订单详情
			getOrderDetail() {
				
				this.$api.getOrderDetail({
					order_id: this.order_id
				}).then(res => {
					if (res.data.status == true) {
						var a = res.data.data;
						a.bizpro_arr[0].lable = JSON.stringify(a.bizpro_arr[0].bizpro_lable).split(',');
						this.getinfo = a;
					} else {
						// alert('暂无数据')
						console.log('暂无数据');
					}

				})
			},
			//商品详情
			toDetail(bizpro_id) {
				uni.navigateTo({
					url: '/pages/goods/GoodsDetail?id=' + bizpro_id
				})
			}
		}
	}
</script>

<style>
	.page {
		padding-top: calc(var(--status-bar-height) + 120rpx);
		width: 100%;
		height: calc(100vh - var(--status-bar-height) - 120rpx);
		overflow-x: hidden;
	}

	.order-info {
		width: 750rpx;
		height: 444rpx;
		background: rgba(255, 255, 255, 1);
		box-shadow: 0px 4px 8px 0px rgba(204, 204, 204, 1);
	}

	.name {
		width: 750rpx;
		height: 102rpx;
		line-height: 102rpx;
		border-bottom: 1rpx solid #E6E6E6;
		position: relative;
	}

	.receiver {
		width: 158rpx;
		height: 29rpx;
		margin-left: 30rpx;
		font-size: 30rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: rgba(51, 51, 51, 1);
	}

	.receiver-name {
		position: absolute;
		right: 30rpx;
		font-size: 28rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: rgba(153, 153, 153, 1);
	}

	.tel {
		width: 750rpx;
		height: 97rpx;
		line-height: 97rpx;
		position: relative;
		border-bottom: 1rpx solid #E6E6E6;
	}

	.receiver-tel {
		width: 158rpx;
		height: 29rpx;
		font-size: 30rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: rgba(51, 51, 51, 1);
		margin-left: 31rpx;
	}

	.tel-number {
		position: absolute;
		right: 30rpx;
		font-size: 28rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: rgba(153, 153, 153, 1);
	}

	.user-id {
		width: 750rpx;
		height: 97rpx;
		line-height: 97rpx;
		position: relative;
		border-bottom: 1rpx solid #E6E6E6;
	}

	.receiver-id {
		width: 156rpx;
		height: 29rpx;
		font-size: 30rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: rgba(51, 51, 51, 1);
		margin-left: 32rpx;
	}

	.id-number {
		position: absolute;
		right: 30rpx;
		font-size: 28rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: rgba(153, 153, 153, 1);
	}

	.address {
		position: relative;
		width: 750rpx;
		height: 145rpx;
		line-height: 145rpx;
	}

	.receiver-address {
		width: 158rpx;
		height: 29rpx;
		font-size: 30rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: rgba(51, 51, 51, 1);
		margin-left: 32rpx;
	}

	.address-content {
		position: absolute;
		top: 50rpx;
		right: 30rpx;
		width: 424rpx;
		height: 66rpx;
		line-height: 40rpx;
		font-size: 28rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: rgba(153, 153, 153, 1);
		text-align: right;
	}

	.goods-name {
		width: 750rpx;
		background: rgba(255, 255, 255, 1);
		box-shadow: 0rpx 4rpx 8rpx 0rpx rgba(204, 204, 204, 1);
		margin-top: 20rpx;
	}

	.goods-info {
		position: relative;
		width: 750rpx;
		height: 260rpx;
		border: 1rpx solid #eee;
		border-radius: 20rpx;
		margin-top: 20rpx;
	}

	.goods-info image {
		width: 160rpx;
		height: 160rpx;
		margin-top: 29rpx;
		margin-left: 30rpx;
	}

	.goods-content {
		position: absolute;
		top: 30rpx;
		left: 230rpx;
		width: 450rpx;
		font-size: 32rpx;
		font-family: PingFang SC;
		font-weight: bold;
		color: rgba(51, 51, 51, 1);
		overflow:hidden; //超出的文本隐藏
		text-overflow:ellipsis; //用省略号显示
		white-space:nowrap; //不换行
	}

	.tagmain {
		width: 279rpx;
		height: auto;
		/* background-color: red; */
		position: absolute;
		top: 70rpx;
		left: 235rpx;
	}

	.tag {
		display: inline-block;
		justify-content: center;
		align-items: center;
		width: auto;
		height: 28rpx;
		line-height: 28rpx;
		background: rgba(222, 245, 255, 1);
		border: 1rpx solid rgba(185, 233, 255, 1);
		border-radius: 8rpx;
		font-size: 22rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: rgba(72, 180, 231, 1);
		padding:0px 6px;
		margin-right:6px;
	}

	.tag-one {
		/* position: absolute;
		top: 100rpx;
		left: 235rpx; */
	}

	.tag-two {
		position: absolute;
		top: 100rpx;
		left: 368rpx;
	}

	.price-count {
		position: absolute;
		top: 170rpx;
		left: 232rpx;
		height: 23rpx;
		font-size: 30rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: rgba(254, 177, 71, 1);
	}

	.size {
		position: absolute;
		top: 130rpx;
		left: 200rpx;
		margin-left: 30rpx;
		font-size: 24rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: rgba(153, 153, 153, 1);
		width: 450rpx;
		overflow:hidden; //超出的文本隐藏
		text-overflow:ellipsis; //用省略号显示
		white-space:nowrap; //不换行
	}

	.total {
		position: absolute;
		bottom: 30rpx;
		right: 29rpx;
		height: 28rpx;
		font-size: 30rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: rgba(51, 51, 51, 1);
	}

	.order-detail {
		width: 750rpx;
		height: auto;
		display: table;
		margin-top: 20rpx;
		/* margin-bottom: 150rpx; */
		background: rgba(255, 255, 255, 1);
		box-shadow: 0px 4px 8px 0px rgba(204, 204, 204, 1);
	}

	.order-price-wrap {
		width: 750rpx;
		height: 102rpx;
		line-height: 102rpx;
		border-bottom: 1rpx solid #E6E6E6;
		position: relative;
	}

	.order-price {
		width: 125rpx;
		height: 29rpx;
		font-size: 30rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: rgba(51, 51, 51, 1);
		margin-left: 30rpx;
	}

	.price {
		position: absolute;
		right: 30rpx;
		height: 22rpx;
		font-size: 28rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: rgba(153, 153, 153, 1);
	}

	.reduce-wrap {
		position: relative;
		width: 750rpx;
		height: 89rpx;
		line-height: 89rpx;
		border-bottom: 1rpx solid #E6E6E6;
	}

	.reduce {
		width: 125rpx;
		height: 29rpx;
		font-size: 30rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: rgba(51, 51, 51, 1);
		margin-left: 30rpx;
	}

	.reduce-money {
		position: absolute;
		right: 30rpx;
		height: 22rpx;
		font-size: 28rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: rgba(153, 153, 153, 1);
	}

	.pay-wrap {
		width: 750rpx;
		height: 90rpx;
		line-height: 90rpx;
		position: relative;
		border-bottom: 1rpx solid #E6E6E6;
	}

	.pay {
		width: 124rpx;
		height: 29rpx;
		font-size: 30rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: rgba(51, 51, 51, 1);
		margin-left: 30rpx;
	}

	.pay-cash {
		position: absolute;
		right: 30rpx;
		height: 22rpx;
		font-size: 28rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: rgba(153, 153, 153, 1);
	}

	.payways-wrap {
		width: 750rpx;
		height: 88rpx;
		line-height: 88rpx;
		position: relative;
		border-bottom: 1rpx solid #E6E6E6;
	}

	.pay-ways {
		width: 124rpx;
		height: 29rpx;
		font-size: 30rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: rgba(51, 51, 51, 1);
		margin-left: 30rpx;
	}

	.wechat {
		position: absolute;
		right: 30rpx;
		height: 26rpx;
		font-size: 28rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: rgba(153, 153, 153, 1);
	}

	.paytime-wrap {
		width: 750rpx;
		height: 87rpx;
		line-height: 87rpx;
		border-bottom: 1rpx solid #E6E6E6;
		position: relative;
	}

	.pay-time {
		width: 125rpx;
		height: 29rpx;
		font-size: 30rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: rgba(51, 51, 51, 1);
		margin-left: 30rpx;
	}

	.date {
		position: absolute;
		right: 30rpx;
		font-size: 28rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: rgba(153, 153, 153, 1);
	}

	.ordernumber-wrap {
		width: 750rpx;
		height: 111rpx;
		line-height: 111rpx;
		position: relative;
		border-bottom: 1rpx solid #E6E6E6;
	}

	.order-number {
		width: 125rpx;
		height: 29rpx;
		font-size: 30rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: rgba(51, 51, 51, 1);
		margin-left: 30rpx;
	}

	.number {
		position: absolute;
		right: 30rpx;
		font-size: 28rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: rgba(153, 153, 153, 1);
	}
</style>
